<template>
  <div class="detectionPriceTemplate pd-20">
    <el-tabs type="border-card"
             @tab-click="clickTab">
      <el-tab-pane label="通用价格模板">
        <el-table stripr
                  border
                  :data="commonData"
                  style="width: 100%"
                  class="mt-20">
          <el-table-column label="序号"
                           align="center"
                           width="50"
                           type="index">
          </el-table-column>
          <el-table-column prop="level"
                           align="center"
                           label="医院等级"
                           :formatter="formatterLevel"
                           width="100">
          </el-table-column>
          <el-table-column min-width="80"
                           align="right">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="configurationPriceTemp(scope.row.id)">配置通用价格模板</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="自定义价格模板">
        <el-table stripe
                  border
                  :data="commonData"
                  style="width: 100%"
                  class="mt-20">
          <el-table-column label="序号"
                           align="center"
                           width="50"
                           type="index">
          </el-table-column>
          <el-table-column prop="level"
                           align="center"
                           label="医院等级"
                           :formatter="formatterLevel"
                           width="100">
          </el-table-column>
          <el-table-column min-width="80"
                           align="right">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="configurationCustomPriceTemp(scope.row.id)">配置自定义价格模板</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog class="tempDialog"
               title="检测解读价格模板配置"
               width="60%"
               :visible.sync="dialogVisible">
      <el-form :model="dynamicValidateForm"
               ref="dynamicValidateForm"
               label-width="100px"
               :label-position="labelPosition">
        <el-form-item v-for="doctorTitle in dynamicValidateForm.communityMoneyDtoList"
                      :key="doctorTitle.key">
          <el-select multiple
                     collapse-tags
                     class="select"
                     v-model="doctorTitle.doctorTitleIds"
                     placeholder="请选择职称...">
            <el-option v-for="item in doctorTitles"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
          <el-input v-model="doctorTitle.money">
            <template slot="prepend">价格</template>
          </el-input>
          <el-button @click.prevent="removeTemp(doctorTitle)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitForm(dynamicValidateForm)">提交</el-button>
          <el-button @click="addPriceTemp">新增</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="tempDialog"
               title="检测解读价格模板配置"
               width="60%"
               :visible.sync="dialogFormVisible">
      <el-form :model="formData"
               ref="dynamicValidateForm"
               label-width="100px"
               :label-position="labelPosition">
        <el-form-item v-for="doctorTitle in formData.communityMoneyDtoList"
                      :key="doctorTitle.key">
          <el-select v-model="doctorTitle.hospitalId"
                     filterable
                     remote
                     clearable
                     :remote-method="initHospital"
                     placeholder="请选择医院...">
            <el-option v-for="hospital in hospitalList"
                       :key="hospital.id"
                       :label="hospital.name"
                       :value="hospital.id">
            </el-option>
          </el-select>
          <el-select multiple
                     collapse-tags
                     v-model="doctorTitle.doctorTitleIds"
                     placeholder="请选择职称...">
            <el-option v-for="doctorTitle in doctorTitles"
                       :key="doctorTitle.id"
                       :label="doctorTitle.name"
                       :value="doctorTitle.id">
            </el-option>
          </el-select>
          <el-input class="price"
                    v-model="doctorTitle.money">
            <template slot="prepend">价格</template>
          </el-input>
          <el-button @click.prevent="removeCustomTemp(doctorTitle)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitCustomForm(formData)">提交</el-button>
          <el-button @click="addCustomPriceTemp">新增</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "detectionPriceTemplate",
    data () {
      return {
        labelPosition: 'right',
        commonData: [],
        commonPriceTemplate: [],
        doctorTitles: [],
        hospitalList: [],
        pageSize: 100,
        pageIndex: 0,
        dialogVisible: false,
        dialogFormVisible: false,
        dynamicValidateForm: {
          levelId: '',
          communityMoneyDtoList: [{
            ids: [],
            doctorTitleIds: [],
            money: ''
          }]
        },
        formData: {
          levelId: '',
          communityMoneyDtoList: [{
            ids: [],
            hospitalId: '',
            doctorTitleIds: [],
            money: ''
          }]
        },
        name: ''
      }
    },
    mounted () {
      this.initTableData()
    },
    methods: {
      configurationPriceTemp (level) {
        this.dialogVisible = true;
        this.dynamicValidateForm.levelId = level;
        //查询医生职称
        this.initDoctorTitle();
        let param = {
          levelId: level
        };
        this.dynamicValidateForm.communityMoneyDtoList = [];
        this.post(this.api.communityMoney.url, param).then(res => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.dynamicValidateForm.communityMoneyDtoList = res.data.object;
            } else {
              this.dynamicValidateForm.communityMoneyDtoList = [{
                ids: [],
                doctorTitleIds: [],
                money: ''
              }]
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        })
      },
      configurationCustomPriceTemp (level) {
        this.dialogFormVisible = true;
        this.formData.levelId = level;
        //查询医生职称
        this.initDoctorTitle();
        let param = {
          levelId: level
        };
        this.post(this.api.selectCustomPriceTemp.url, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              for (let i = 0; i < res.data.object.length; i++) {
                this.selectHospitalInfoById(res.data.object[i].hospitalId)
              }
              this.formData.communityMoneyDtoList = res.data.object;
            } else {
              this.formData.communityMoneyDtoList = [{
                ids: [],
                hospitalId: '',
                doctorTitleIds: [],
                money: ''
              }]
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      clickTab () {
        this.initTableData()
      },
      initTableData () {
        this.post(this.api.hospitalLevel.getHospitalLevel).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.commonData = res.data.object;
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      initDoctorTitle () {
        let param = {
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        }
        this.post(this.api.doctorTitle.getPageAPP, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.doctorTitles = res.data.object;
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      initHospital (query) {
        if (query !== '' && query.toString().length >= 2) {
          let param = {
            level: this.formData.levelId,
            name: query
          };
          this.post(this.api.hospitalManager.selectDetailByLevel, param).then((res) => {
            if (res.data.code === '200') {
              if (res.data.object.length) {
                this.hospitalList = this.hospitalList.concat(res.data.object);
              }
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
            }
          });
        }
      },
      formatterLevel (row) {
        switch (row.id) {
          case 2:
            return "三甲医院";
            break;
          case 4:
            return "三乙医院";
            break;
          case 6:
            return "三级丙等";
            break;
          case 8:
            return "三级丁等";
            break;
          case 10:
            return "二级甲等";
            break;
          case 12:
            return "二级乙等";
            break;
          case 14:
            return "二级丙等";
            break;
          case 16:
            return "二级丁等";
            break;
          case 18:
            return "一级甲等";
            break;
          case 20:
            return "一级乙等";
            break;
          case 22:
            return "一级丙等";
            break;
          case 24:
            return "诊所";
            break;
          case 26:
            return "药店";
            break;
          case 28:
            return "其他";
            break;
        }
      },
      submitCustomForm (formData) {
        this.post(this.api.modifyCustomTemp.url, formData).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              showClose: true,
              message: "操作成功!",
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.initTableData()
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      submitForm (formData) {
        this.post(this.api.modifyMoney.url, formData).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              showClose: true,
              message: "操作成功!",
              type: 'success'
            });
            this.dialogVisible = false;
            this.initTableData()
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      addPriceTemp () {
        this.dynamicValidateForm.communityMoneyDtoList.push({
          ids: [],
          doctorTitleIds: [],
          money: ''
        });
      },
      addCustomPriceTemp () {
        this.formData.communityMoneyDtoList.push({
          ids: [],
          hospitalId: '',
          doctorTitleIds: [],
          money: ''
        })
      },
      removeTemp (item) {
        let index = this.dynamicValidateForm.communityMoneyDtoList.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.communityMoneyDtoList.splice(index, 1)
        }
      },
      removeCustomTemp (item) {
        let index = this.formData.communityMoneyDtoList.indexOf(item);
        if (index !== -1) {
          this.formData.communityMoneyDtoList.splice(index, 1)
        }
      },
      selectHospitalInfoById (id) {
        let param = {
          id: id
        };
        this.hospitalList = [];
        this.post(this.api.hospitalManager.selectDetailById, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object) {
              this.hospitalList = this.hospitalList.concat(res.data.object);
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .el-tabs--border-card {
    border: 0px solid #dcdfe6;
  }
  .el-button--small {
    margin-left: 10px;
  }
  .el-select--small {
    margin-left: 10px;
    width: 230px;
  }
  .tempDialog {
    text-align: center;
  }
  .el-input-group {
    margin-left: 10px;
    width: 200px;
  }
</style>
